* {
	margin: 0;
	padding: 0;
}

.container {
	width: 400px;
	height: 200px;
	background-color: #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	overflow: hidden;
}

.halfcircle {
	width: 100px;
	height: 100px;
	background-color: #fc0;
	border-radius: 50px;
}

#bg1 {
	transform: translate(-50%,-50%);
}

#bg2 {
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translate(50%,50%);
}